<script setup lang="ts">
import { h, ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NCard, NModal, NForm, NSpace, NFormItem, NInput, NButton, NDataTable } from 'naive-ui'
import type { FormInst } from 'naive-ui'
import http from '@/tools/http'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()

type RowData = {
    tableCat?: string
    tableName?: string
    remarks?: string
}

type PreviewData = {
    basePackage?: string
    removeTableNamePrefix?: string
    urlPrefix?: string
    datasourceName: any
    tableName?: string
    author?: string
}

const tablesTableColumns = [
    {
        title: "数据库名称",
        key: "tableCat"
    }, {
        title: "表名称",
        key: "tableName"
    }, {
        title: "备注",
        key: "remarks"
    }, {
        title: "操作",
        key: "actions",
        width: 132,
        render(rowData: RowData, rowIndex: number) {
            return h(
                NSpace, null,
                () => [
                    userStore.hasAuth("code-generator-columns") ? h(
                        NButton,
                        {
                            size: "small",
                            onclick: () => showColumns(rowData)
                        },
                        { default: () => "查看" }
                    ) : null,
                    userStore.hasAuth("code-generator-code-preview") ? h(
                        NButton,
                        {
                            size: "small",
                            onclick: () => openCodePreview(rowData)
                        },
                        { default: () => "预览" }
                    ) : null
                ]
            )
        }
    }
]

const tablesData = reactive<any>({
    list: []
})

const tablesSearchFormValue = reactive<any>({
    datasourceName: "",
    tableName: ""
})

const router = useRouter()
const route = useRoute()

onMounted(() => {
    tablesSearchFormValue.datasourceName = route.query.datasourceName
    formData.datasourceName = route.query.datasourceName
    listTables()
})

const visiable = ref(false)
const formRef = ref<FormInst | null>(null)
const formData = reactive<PreviewData>({
    basePackage: "",
    removeTableNamePrefix: "",
    urlPrefix: "",
    datasourceName: "",
    tableName: "",
    author: "",
})

const formRules = {
    datasourceName: {
        required: true,
        message: '请输入数据源名称',
        trigger: ['input']
    },
    tableName: {
        required: true,
        message: '请输入表名',
        trigger: ['input']
    },
    basePackage: {
        required: true,
        message: '请输入包名',
        trigger: ['input']
    }
}

function showColumns(rowData: RowData) {
    router.push({
        name: 'code-generator-columns',
        query: { datasourceName: formData.datasourceName, tableName: rowData.tableName }
    })
}

function openCodePreview(rowData: RowData) {
    formData.tableName = rowData.tableName
    visiable.value = true
}

function codePreview() {
    formRef.value?.validate((errors) => {
        if (!errors) {
            router.push({
                name: 'code-generator-code-preview',
                query: formData
            })
        }
    })
}

function listTables() {
    http.post("/datasource/table/list", tablesSearchFormValue).then(({ data }) => {
        tablesData.list.length = 0
        for (let i = 0; i < data.data.length; i++) {
            tablesData.list.push(data.data[i])
        }
    })
}
</script>

<template>
    <div id="flame-container">
        <div class="header" style="font-size:18px;font-weight:500;line-height:34px;">
            <n-space justify="space-between">
                <div>
                    数据源名称：{{ formData.datasourceName }}
                </div>
                <div>
                    <n-button quaternary @click="router.back()">返回</n-button>
                </div>
            </n-space>
        </div>
        <div class="search" style="margin-top:0px;padding-top:0px;">
            <n-form :model="tablesSearchFormValue" inline label-placement="left">
                <n-form-item label="表名称" path="tableName">
                    <n-input v-model:value="tablesSearchFormValue.tableName" placeholder="请输入表名称" clearable />
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" @click="listTables()">查询</n-button>
                </n-form-item>
            </n-form>
        </div>
        <div class="data-table" style="top:120px;bottom:12px;">
            <n-data-table :scrollbar-props="{ trigger: 'none' }" style="height:100%" flex-height
                :columns="tablesTableColumns" :data="tablesData.list" :bordered="false" />
        </div>
    </div>
    <n-modal v-model:show="visiable">
        <n-card style="width: 500px" title="预览代码">
            <n-form ref="formRef" :model="formData" :rules="formRules" label-width="92px" label-placement="left"
                require-mark-placement="left">
                <n-form-item label="数据源名称" path="datasourceName">
                    <n-input v-model:value="formData.datasourceName" :disabled="true" placeholder="请输入数据源名称" />
                </n-form-item>
                <n-form-item label="表名称" path="tableName">
                    <n-input v-model:value="formData.tableName" :disabled="true" placeholder="请输入表名称" />
                </n-form-item>
                <n-form-item label="包名" path="basePackage">
                    <n-input v-model:value="formData.basePackage" placeholder="请输入包名 com.xxx.xxx" />
                </n-form-item>
                <n-form-item label="去除表前缀" path="removeTableNamePrefix">
                    <n-input v-model:value="formData.removeTableNamePrefix" placeholder="请输入去除表前缀 tb_" />
                </n-form-item>
                <n-form-item label="添加url前缀" path="urlPrefix">
                    <n-input v-model:value="formData.urlPrefix" placeholder="请输入添加url前缀 /user" />
                </n-form-item>
                <n-form-item label="作者名称" path="author">
                    <n-input v-model:value="formData.author" placeholder="请输入作者名称" />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button attr-type="button" @click="visiable = false">取消</n-button>
                    <n-button attr-type="button" @click="codePreview()">预览</n-button>
                </n-space>
            </template>
        </n-card>
    </n-modal>
</template>

<style scoped>
</style>